<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="text" id="input">
</body>
<script>
  //定义一个对象
  const obj = {
    name: 'harry',
  }
// 定义一个变量，接受改变后的对象属性
  let vm = ''
  //监听对象属性的变化，并且赋值给输入框，实现 数据 =》 视图
    Object.defineProperty(obj,'name',{
      get(){
         console.log('get触发了，查询了obj的值');
         return vm
      },
      set(val){
         console.log('set触发了,设置了obj的name',val);
         document.querySelector('#input').value = val
         vm = val
      }
    })
    // 监听输入框内容变化，value改变，就对obj属性重新赋值，实现 视图 =》 数据
    document.querySelector('#input').addEventListener('input',e =>{
      obj.name= e.target.value 
    })

</script>

</html>